<!doctype html>
<html>
<head>
    <title>柯柯爱潘潘</title>
    <meta name="keywords" content="柯柯, 潘潘, 爱, Love, 永远, forever">
    <meta name="description" content="柯柯和潘潘，相伴到偕老！"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <link rel="stylesheet" href="./css/flexUi.css"/>
    <style>
        html, body, iframe {
            width: 100%;
            height: 100%;
            background: #000000;
            margin: 0;
            padding: 0;
            overflow: hidden;
            -webkit-overflow-scrolling: touch;
        }

        body {
            background-image: radial-gradient(#ffeded, #ffc7c7);
        }

        #iframe {
            display: block;
            box-sizing: border-box;
            opacity: 0;
            transform-style: preserve-3d; /*3d环境*/
            /*transform-origin: center;*/
            transform-origin: center top;
            transition: all 800ms ease-in;
            transform: rotateY(-270deg);
            pointer-events: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        #iframe.show {
            pointer-events: auto;
            opacity: 1;
            transform: rotateY(0deg);
        }

        #timeCount {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            box-sizing: border-box;
            padding: 0 0.4rem;
            text-align: center;
            color: #000000;
            margin-top: 3rem;
            font-family: 'Regular', cursive;
            font-size: 2rem;
        }

        .heartsItem {
            position: fixed;
            opacity: 0;
            background-color: #cc2a5d;
            transform: rotate(45deg);
            animation: hearts 3s ease-in infinite;
            pointer-events: none;
        }

        .heartsItem::before,
        .heartsItem::after {
            content: '';
            width: 100%;
            height: 100%;
            background-color: #cc2a5d;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50%;
        }

        .heartsItem::before {
            transform: translateX(-50%);
        }

        .heartsItem::after {
            transform: translateY(-50%);
        }

        @keyframes hearts {
            0% {
                opacity: 0;
                transform: translateY(0%) rotate(45deg);
            }
            20% {
                opacity: 0.8;
                transform: translateY(-20%) rotate(45deg);
            }
            100% {
                opacity: 0;
                transform: translateY(-1000%) rotate(45deg);
            }
        }

        #bottom {
            position: fixed;
            box-sizing: border-box;
            width: 100%;
            height: 33%;
            padding: .6rem;
            z-index: 999;
            border-top-left-radius: .4rem;
            border-top-right-radius: .4rem;
            transition: all 300ms;
            bottom: calc(3rem - 33%);
            left: calc(3rem - 100%);
            box-shadow: 0;
            background-color: transparent;
        }

        #bottom.show {
            bottom: 0;
            left: 0;
            box-shadow: 0 0 3px #000000;
            background-color: #FFFFFF;
        }

        #bottom .switchHistory {
            position: absolute;
            right: 0;
            top: 0;
            width: 3rem;
            height: 3rem;
            cursor: pointer;
            background: url("./img/history.png") no-repeat center;
            background-size: contain;
            z-index: 2;
        }

        #bottom .tit {
            font-size: 1.25rem;
            font-weight: bold;
            margin-bottom: .4rem;
        }

        #bottom .con a {
            display: block;
            text-decoration: none;
            margin: .4rem;
        }
    </style>
</head>
<iframe id="iframe" src="" frameborder="0"></iframe>
<div id="timeCount">Loading...</div>
<div id="bottom" class="uf uf-ver">
    <div onclick="$('#bottom').toggleClass('show');" class="switchHistory"></div>
    <div class="tit">往期回顾</div>
    <div class="con uf-f u-scroll">
        <a href="pages/love61/index.html">儿童节快乐</a>
    </div>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
    var FRAME_SRC = 'pages/love7x/index.html';
    var FRAME_TITLE = '七夕快乐';
    $(function () {
        heartsInit();
        count_down('2020-8-25 00:00:00', '我们的第一个七夕');
    });
    function count_down(ori, oriStr) {
        var titleStr = '亲爱的潘潘<br /><br />'
        var oriStart = '2019-10-13 18:27:00', oriStartStr = '';
        var oriStartLove = '2019-11-3 19:30:00', oriStartLoveStr = '';
        var countStr = '';
        var o = ori;
        var $iframe = $('#iframe');
        var datatime = /^[\d]{4}-[\d]{1,2}-[\d]{1,2}( [\d]{1,2}:[\d]{1,2}(:[\d]{1,2})?)?$/ig, str = '', conn, s;
        if (!o.match(datatime)) {
            alert('参数格式为2020-01-01[ 01:01[:01]].\r其中[]内的内容可省略');
            return false;
        }
        var sec = (new Date(o.replace(/-/ig, '/')).getTime() - new Date().getTime()) / 1000;
        var oriStartSec = (new Date().getTime() - new Date(oriStart.replace(/-/ig, '/')).getTime()) / 1000;
        var oriStartLoveSec = (new Date().getTime() - new Date(oriStartLove.replace(/-/ig, '/')).getTime()) / 1000;
        if (sec > 0) {
            conn = '还有';
        } else {
            $('#bottom').removeClass('show');
            FRAME_SRC = FRAME_SRC + '?timestamp=' + new Date().getTime();
            $iframe.attr('src', FRAME_SRC).addClass('show');
            document.title = FRAME_TITLE;
            document.getElementById('timeCount').style.visibility = 'hidden';
            heartsClear();
            conn = '已经过去';
            sec *= -1;
            return;
        }
        str = fmtTimeSec(sec);
        oriStartStr = '距离我们 <u onclick="showMsg(this);" title="' + oriStart + '">相识</u> 已经过去 <u>' + fmtTimeSec(oriStartSec) + '</u><br /><br />';
        oriStartLoveStr = '距离我们 <u onclick="showMsg(this);" title="' + oriStartLove + '">相恋</u> 已经过去 <u>' + fmtTimeSec(oriStartLoveSec) + '</u><br /><br />';
        var oStr = o;
        if (oriStr)oStr = oriStr;
        countStr = '距离 <u onclick="showMsg(this);" title="' + ori + '">' + oStr + '</u> ' + conn + ' <u> ' + str + '</u> !';
        document.getElementById('timeCount').innerHTML = titleStr + oriStartStr + oriStartLoveStr + countStr;
        setTimeout(function () {
            count_down(o, oriStr)
        }, 1000);

        function fmtTimeSec(sec) {
            var text = '';
            s = {'天': sec / 24 / 3600, '小时': sec / 3600 % 24, '分': sec / 60 % 60, '秒': sec % 60};
            for (var i in s) {
                if (Math.floor(s[i]) > 0) text += Math.floor(s[i]) + i;
            }
            if (Math.floor(sec) == 0) {
                text = '0秒';
            }
            return text;
        }

    }

    function heartsInit() {
        var box = document.body;

        function init() {
            var width = box.offsetWidth;
            var count = parseInt(width / 50 * 5);
            for (var i = 0; i < count; i++) {
                var size = parseInt(ran(50, 150) / 10);
                var ele = document.createElement('div');
                ele.classList.add('heartsItem');
                ele.style.width = size + 'px';
                ele.style.height = size + 'px';
                ele.style.left = ran(5, 95) + '%';
                ele.style.top = ran(20, 98) + '%';
                ele.style.animationDelay = ran(0, 30) / 10 + 's';
                box.appendChild(ele);
            }
        }

        function ran(min, max) {
            min = parseInt(min);
            max = parseInt(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        init();
    }

    function heartsClear() {
        $(".heartsItem").remove();
    }

    function showMsg(e) {
        var $e = $(e);
        var t = $e.text();
        var time = $e.attr('title');
        var msg = t + '\n' + time;
        alert(msg);
    }
</script>
</body>
</html>

